<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
  <div class="position-sticky pt-3">
    <ul id="nav-ul" class="nav flex-column">
      <li class="nav-item">
        <a class="nav-link" :class="path == 'index' ? 'active' : ''" aria-current="page" href="/">
          <span data-feather="home"></span>
          课程列表
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" :class="path == 'order' ? 'active' : ''" aria-current="page" href="/order">
          <span data-feather="home"></span>
          我的订单
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" :class="path == 'deposit' ? 'active' : ''" aria-current="page" href="/deposit">
          <span data-feather="home"></span>
          余额充值
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" :class="path == 'account' ? 'active' : ''" aria-current="page" href="/account">
          <span data-feather="home"></span>
          我的余额
        </a>
      </li>
    </ul>

  </div>

  <script>
    let nav = createApp({
      setup() {
        const path = ref();

        onMounted(() => {
          //获取当前窗口的路径，比如http://127.0.0.1:9000/order，得到的是/order
          let pathname = window.location.pathname; // /order
          pathname = pathname.replace("/", ""); // order
          if (pathname === "") {
            // 如果访问的是http://127.0.0.1:9000，则变成index
            pathname = "index";
          }

          path.value = pathname;
        });

        return {
          path
        }
      }
    });
    nav.mount("#nav-ul");
  </script>
</nav>
